<template>
  <el-aside :class="isCollapse ? 'app__sidebar is-active' : 'app__sidebar '">
    <transition>
      <div class="app__title">
        <!-- 正确语法：使用 img 标签，src 属性指定图片路径 -->
        <img :src="title.icon" alt="图标" style="width: 30px; height: 30px" />
        <!-- <el-icon><component :is="title.icon" /></el-icon> -->
        <span v-if="isShowTitle">
          <h3>{{ title.label }}</h3>
        </span>
      </div>
    </transition>
    <el-scrollbar height="calc(100vh - 60px)">
      <Menu :isCollapse="isCollapse" @clickItem="clickDrag" @setMenuMap="val => $emit('setMenuMap', val)"></Menu>
    </el-scrollbar>
  </el-aside>
  <drag ref="dragRef" @clickDrag="clickDrag"></drag>
</template>
<script setup>
import { ref, computed, watchEffect, onMounted, onUnmounted, defineEmits, getCurrentInstance } from 'vue'
import drag from '@/components/drag/index'
import Menu from '@/components/menu/index'
const { proxy } = getCurrentInstance()
const baseUrl = import.meta.env.VITE_APP_BASE_URL
const title = ref({
  label: '小程序后台管理系统',
  icon: baseUrl + '/favicon.ico'
})
const isShowTitle = ref(false)
const dragRef = ref(null)
const clickDrag = item => {
  proxy.$emit('clickItem', item)
  dragRef.value?.close()
  updateScreenWidth()
}
// 更新屏幕宽度状态
const updateScreenWidth = () => {
  window.innerWidth < 1000 ? closeDrag() : (dragCanShow.value = false)
}
const isCollapse = defineModel()
const dragCanShow = ref(false)
const closeDrag = () => {
  dragCanShow.value = true
  isCollapse.value = false
}
// 添加 resize 事件监听器
onMounted(() => {
  updateScreenWidth() // 初始化状态
  window.addEventListener('resize', updateScreenWidth)
})

// 移除 resize 事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenWidth)
})

// 声明一个变量存储定时器ID
let showTitleTimer = null

// 自动追踪依赖的变化
watchEffect(() => {
  if (isCollapse.value) {
    // 保存定时器ID
    showTitleTimer = setTimeout(() => {
      isShowTitle.value = true
      showTitleTimer = null // 执行后清空ID
    }, 300)

    if (dragCanShow.value) {
      dragRef.value?.open()
    } else {
      dragRef.value?.close()
    }
  } else {
    // 每次触发时先清除可能存在的定时器
    if (showTitleTimer) {
      clearTimeout(showTitleTimer)
      showTitleTimer = null
    }
    // 取消定时器并设置为false
    isShowTitle.value = false
  }
})
</script>
<style scoped>
.app__title {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.app__sidebar {
  width: 56px;
  background: #304156;
  transition: width 0.3s ease;
  overflow: hidden;
}
.app__sidebar.is-active {
  width: 200px;
}

.app__sidebar .el-menu {
  border-right: none;
  height: calc(100vh - 60px);
}
/* 响应式设计 */
@media (max-width: 1000px) {
  .app__sidebar {
    width: 0px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    transition: width 0.3s ease;
  }

  .app__sidebar.is-active {
    width: 200px;
  }
  .app__drag.is-active {
    background: #000;
    opacity: 0.3;
    top: 0;
    position: absolute;
    z-index: 999;
    width: 100vw;
    height: 100vh;
  }
}
</style>